<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OUIF : Horizontal CSS Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="hrBar.css" id="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="hrBar.js"></script>
</head>
<body>
<h1 style="font:bold 24px Tahoma">CSS Naviagation Bar.</h1>
<button type="button" onclick="jQuery('div#menu').removeClass().addClass('menu'+' '+'mcPurple');">mcPurple</button>
<button type="button" onclick="jQuery('div#menu').removeClass().addClass('menu'+' '+'mcViolet');">mcViolet</button>
<button type="button" onclick="jQuery('div#menu').removeClass().addClass('menu'+' '+'mcOrange');">mcOrange</button>
<button type="button" onclick="jQuery('div#menu').removeClass().addClass('menu'+' '+'mcGreen');">mcGreen</button>
<button type="button" onclick="jQuery('div#menu').removeClass().addClass('menu'+' '+'mcGray');">mcGray</button>
|
<button type="button" onclick="jQuery('div#menu').removeClass();">CSS X</button>
<button type="button" onclick="jQuery('div#menu').addClass('menu'+' '+'mcPurple');">CSS O</button>
<br />
<br />
<div id="menu" class="menu mcPurple">
<!-- class="mcPurple | mcViolet | mcOrange | mcGreen | mcGray"-->
	<div class="inset">
		<div class="major">
		<!-- class="major + (m1~m12)"-->
			<ul>
				<li class="m1"><a href="#"><span>동해물과</span></a>
					<div class="sub">
						<ul>
							<li><a href="#"><span>동해물과</span></a></li>
							<li><a href="#"><span>동해</span></a></li>
						</ul>
					</div>
			 	
				</li>
				<li class="m2"><a href="#"><span>백두산이</span></a>
					<div class="sub">
						<ul>
							<li><a href="#"><span>백두산이 마르고 닳도록</span></a></li>
							<li><a href="#"><span>백두산</span></a></li>
						</ul>
					</div>
				</li>
				<li class="m3"><a href="#"><span>마르고</span></a></li>
				<li class="m4"><a href="#"><span>닳도록</span></a>
					<div class="sub">
						<ul>
							<li><a href="#"><span>닳도록</span></a></li>
							<li><a href="#"><span>닳도</span></a></li>
							<li><a href="#"><span>닳</span></a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<div class="aside">
			<ul>
				<li class="m1"><a href="#"><span>우리나라</span></a></li>
				<li class="m2"><a href="#"><span>만세</span></a>
					<div class="sub">
						<ul>
							<li><a href="#"><span>만세</span></a></li>
							<li><a href="#"><span>만만세</span></a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<span class="gradient"></span>
	</div>
	<span class="shadow"></span>
</div>
</body>
</html>
